<template>
    <div class="admin-container">
        <div class="page-title">依赖库列表</div>
        <div class="operate">
            <el-button type="primary" @click="showAddEvnLibDialog">新增</el-button>
            <el-button type="danger" @click="deleteEnv">删除</el-button>
        </div>
        <!--列表-->
        <div class="list-wrap">
            <PageTable
                    ref="pageTable"
                    :table-data="tableData"
                    :loading="isLoading"
                    selection
                    :columns="columns"
                    @size-change="handlePageSizeChange"
                    :pagination="pagination">
                <el-table-column slot="operate" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.status=='未安装'" type="primary" size="mini" plain
                                   @click="installEnv(scope.row)">安装
                        </el-button>
                    </template>
                </el-table-column>
            </PageTable>
        </div>
        <!--新增、修改弹框-->
        <el-dialog
                title="新增依赖库"
                :visible.sync="addVisible"
                width="40%"
                :append-to-body="true"
                :close-on-click-modal="false">
            <div class="content">
                <el-form ref="smallScreenForm" v-model="envLib" label-width="100px">
                    <el-form-item label="依赖库名称:" prop="name">
                        <el-input
                                clearable
                                v-model="envLib.name"
                                placeholder="中文，英文，数字及下划线，20字以内"
                                maxlength="20">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="依赖库版本:" prop="version">
                        <el-input
                                clearable
                                v-model="envLib.version"
                                maxlength="50">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="依赖库描述:">
                        <el-input
                                type="textarea"
                                rows="4"
                                show-word-limit
                                v-model="envLib.desc"
                                clearable
                                placeholder="200字以内"
                                maxlength="200">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEvnLib">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import PageTable from "../../components/table/PageTable";
    import {uuid, deleteItemById} from "../../utils/utils"

    export default {
        name: "DeviceList",
        components: {
            PageTable
        },
        data() {
            return {
                addVisible: false,
                isLoading: false,
                tableData: [{
                    id: uuid(),
                    name: "Tensorflow ",
                    version: "2.1.0",
                    desc: "Tensorflow ",
                    status: "已安装"
                }, {
                    id: uuid(),
                    name: " matplotlib",
                    version: "1.1.0",
                    desc: " matplotlib",
                    status: "未安装"
                }, {
                    id: uuid(),
                    name: "libportaudio2 ",
                    version: "0.2.2",
                    desc: "libportaudio2 ",
                    status: "未安装"
                }, {
                    id: uuid(),
                    name: "Unidecode",
                    version: "3.1.0",
                    desc: "Unidecode",
                    status: "已安装"
                }, {
                    id: uuid(),
                    name: "sounddevice",
                    version: "3.2.0",
                    desc: "sounddevice",
                    status: "已安装"
                }],
                columns: [{
                    slot: 'operate'
                }, {
                    prop: 'name',
                    label: '依赖库名称',
                    align: 'center',
                    "show-overflow-tooltip": true
                }, {
                    prop: 'version',
                    label: '依赖库版本',
                    align: 'center'
                }, {
                    prop: 'desc',
                    label: '依赖库说明',
                    align: 'center',
                    "show-overflow-tooltip": true
                }, {
                    prop: 'status',
                    label: '安装状态',
                    align: 'center'
                }],

                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    totalCount: 0
                },

                envLib: {
                    name: '',
                    version: '',
                    desc: '',
                    status: ''
                }
            }
        },
        mounted() {
            const list = localStorage.getItem("env_list");
            if (list) {
                this.tableData = JSON.parse(list);
            }
        },
        methods: {
            handlePageSizeChange(pageSize) {
                console.log(pageSize);
            },
            showAddEvnLibDialog() {
                this.envLib = {
                    id: uuid(),
                    name: '',
                    version: '',
                    desc: '',
                    status: '未安装'
                }
                this.addVisible = true
            },
            saveEvnLib() {
                this.addVisible = false;
                this.tableData.push(this.envLib);
            },
            deleteEnv() {
                let selectData = this.$refs.pageTable.getSelectedData();
                if (selectData && selectData.length > 0) {
                    this.$confirm('此操作将永久删除该依赖库, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        selectData.forEach((item) => {
                            deleteItemById(this.tableData, item.id);
                        })
                        this.saveEnvList();
                        this.$message.success("删除成功!");
                    }).catch(() => {
                    });
                } else {
                    this.$message.warning("请选择数据");
                }
            },
            installEnv(row) {
                this.$confirm('此操作将安装该依赖库, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message.success("安装成功!");
                    row.status = "已安装"
                    this.saveEnvList();
                }).catch(() => {
                });
            },
            saveEnvList() {
                localStorage.setItem("env_list", JSON.stringify(this.tableData))
            }
        }
    }
</script>